<template>
  <div class="box">
    <div class="box-bt">
      <img
        @click="this.$router.go(-1)"
        src="/src/assets/imgs/Snipaste_2022-08-30_09-36-33.png"
      />
      <span>申请退款</span>
    </div>
    <div class="box-bt-2">
      <span>订单信息</span>
    </div>
    <div class="ddnum">
      <span>订单编号：39000909000900</span>
    </div>
    <div class="tkprice">退款金额：<span>￥30.00</span></div>
    <div class="box-bt-3">
      <span>请选择退款原因</span>
    </div>
    <div class="tkyy">
      <van-radio-group v-model="checked">
        <van-cell-group inset>
          <van-cell title="不想去/没时间" clickable @click="checked = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="购错项目" clickable @click="checked = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
          <van-cell title="联系不到医院" clickable @click="checked = '3'">
            <template #right-icon>
              <van-radio name="3" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="box-bt-4">
      <span>可进一步补充退款原因</span>
    </div>
    <div class="tkcon">
      <textarea placeholder="请输入内容"></textarea>
    </div>
    <div class="box-bt-5">
      <span>退款说明：申请退款后，将在2个工作日内原路退回到您的账户。</span>
      <router-link to="orderlistrefund">
        <button>申请退款</button>
      </router-link>
    </div>
  </div>
</template>

<script setup lang='ts'>
</script>

<style scoped>
body {
  background: #f3f1ef;
}
.box {
  background: #f3f1ef;
  height: 100%;
}
.box-bt {
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: white;
}
.box-bt img {
  float: left;
  vertical-align: middle;
}
.box-bt span {
  margin-right: 70px;
}

.box-bt-2 {
  height: 60px;
  line-height: 60px;
  text-indent: 20px;
  color: #b099b0;
}
.ddnum {
  height: 55px;
  line-height: 55px;
  text-indent: 20px;
  background: white;
}
.tkprice {
  height: 55px;
  line-height: 55px;
  text-indent: 20px;
  background: white;
}
.tkprice span {
  color: #ec7b98;
}
.box-bt-3 {
  height: 60px;
  line-height: 60px;
  text-indent: 20px;
  color: #b099b0;
}
.van-cell-group--inset {
  margin: 0;
}
.box-bt-4 {
  height: 60px;
  line-height: 60px;
  text-indent: 20px;
  color: #b099b0;
  border-color: #f3f1ef;
}
.tkcon textarea {
  text-indent: 20px;
  width: 100%;
  height: 145px;
}
.box-bt-4 {
  text-indent: 20px;
  color: #b099b0;
}
.box-bt-5 span {
  font-size: 12px;
  color: #b099b0;
}
.box-bt-5 button {
  width: 90%;
  height: 60px;
  text-align: center;
  background: #ec7b67;
  color: white;
  border-radius: 5px;
  margin-top: 120px;
  margin-left: 5%;
  border: 0;
}
</style>